<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar navbarType='3' title="目的地搜索" ></wlk-navbar>
        <view class="search-content">
            <u-search placeholder="请输入关键词/目的地" v-model="keyword" :actionStyle="{
                color:themeColor
            }" height="38" @search="jump(keyword)"  :focus="true" @custom="jump(keyword)"  actionText="搜索" :searchIconColor="themeColor" margin="30rpx 0"></u-search>
            <view>
                <view class="title bold">大家都在搜</view>
                <view class="wlkflex wrap">
                    <view class="tag-item" v-for="(tag,index) in list">
                        <u-tag :text="tag.name" @click="jump" :name="tag.name" type="info" color="#333333" bgColor="#f3f3f3" borderColor="#f3f3f3" shape="circle"></u-tag>
                    </view>
                </view>
            </view>
        </view>
	</view>
</template>

<script>
    var _self;
    import { toUrl } from '@/wlkutils/tools';
    import { mapGetters} from 'vuex';
    import share from "@/wlkutils/share";
	export default {
        computed:{
            ...mapGetters(['themeColor']),
        },
		data() {
			return {
                keyword: '',
                list:[]
			};
		},
        onLoad(option) {
            _self = this;
            if(option.keyword){
                this.keyword = option.keyword;
            }
        },
        onShow() {
            this.getData();
        },
        onShareAppMessage(res){
            return share.setShareInfo();
        },
        methods: {
            getData() {
                uni.$u.http.post('hotword/getList', {
                    id:_self.id
                }).then(res => {
                    _self.list = res.data.list;
                })
            },
            jump(index){
                if (!uni.$u.test.isEmpty(index)) {
                    toUrl('/pages/category/index?keyword='+index);
                }
            }
	    }
	}
</script>

<style lang="scss">
    page{
        background-color: #FFFFFF;
        .search-content{
            width: 92%;
            margin: 0 auto;
            .title{
              margin: 40rpx 0 20rpx 0;
            }
            .tag-item{
                margin: 20rpx 20rpx 0 0;
            }
        }
        }


</style>
